
<template>
  <!------------------------------------ 代理邀请 ------------------------------------
    @desc 代理邀请弹窗
    @author kyle
    @date 2022-01-04
    @props
      qrPageUrl     ———— 二维码地址
    @method
  -->
  <div class="dialog-box">
    <div class="dialog-shadow" @click="close" />
    <img class="pos-a finger" src="@/assets/hndy/finger.png" alt="指示">
    <div class="dialog-content">
      <div class="pos-r full-height full-width">

        <div v-show="!replaceImg" ref="imgContent" class="share-dialog bg-primary">
          <div class="dialog-bd tal">
            <!-- 顶部背景 -->
            <div class="top-bg" />
            <!-- 邀请人信息栏 -->
            <div class="media-obj flex color-primary">
              <!-- 顶部渐变 -->
              <img class="top-bg-1" src="@/assets/hndy/bg-1.png" alt="渐变">
              <div class="media-head-box flex-s-0 mr-20">
                <headPortrait-box
                  class="img-box "
                  :head-portrait-url="inviteInfo.Face"
                />
                <!-- 截屏不能识别图片圆角，所以利用背景图实现头像圆角 -->
                <div class="media-head-bg" :style="bg" />
              </div>
              <div class="flex-s-fs flex-d-c">
                <p class="fs-28 fw-b color-dark">{{ inviteInfo.Name }}</p>
                <p class="fs-28 color-dark">邀请你成为{{ inviteInfo.GradeName }}</p>
              </div>
            </div>
            <div class=" pd-48">
              <div class=" tac">
                <img :src="qrPageUrl" class="qr-code">
                <p class="fs-28 mt-48">长按二维码图片分享给好友</p>
              </div>
            </div>
          </div>
        </div>
        <div class="share-img-box">
          <img v-show="replaceImg" :src="replaceImg">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
import html2canvas from 'html2canvas'
import headBg from 'assets/images/media-head-bg.png'
export default {
  name: 'Share',
  components: {
    headPortraitBox
  },
  props: {
    inviteInfo: {
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
    qrPageUrl: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      headBg,
      bg: {
        backgroundImage: 'url(' + require('@/assets/images/media-head-white-bg.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%',
        width: '100%'
      },
      replaceImg: ''
    }
  },
  computed: {
  },
  watch: {
    qrPageUrl(newVal, oldVal) {
      console.log('gaibian')
      if (newVal) {
        this.replaceImg = ''
        this.replaceToImg()
      }
    }
  },
  created() {

  },
  mounted() {
    console.log('挂载')
  },
  methods: {
    close() {
      this.$emit('close')
    },
    replaceToImg() {
      setTimeout(() => {
        console.log('画图')
        html2canvas(this.$refs.imgContent, {
          backgroundColor: null,
          allowTaint: true,
          logging: false, // 日志开关，便于查看html2canvas的内部执行流程
          width: this.$refs.imgContent.clientWidth, // dom 原始宽度
          height: this.$refs.imgContent.clientHeight,
          scrollY: 0,
          scrollX: 0,
          scale: window.devicePixelRatio,
          useCORS: true // 图片跨域
        }).then((canvas) => {
          const url = canvas.toDataURL('image/png')
          this.replaceImg = url
          this.$forceUpdate()
        })
      }, 200)
    }

  }
}
</script>

<style lang="scss" scoped>
// 弹窗部分样式
.dialog-box{
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 2016;
  .dialog-shadow{
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left: 0;
    background: rgba(0,0,0,0.7);
  }
  .finger{
    width: 246px;
    height:264px;
    top: 60px;
    right: -20px;
    z-index: 100;
  }

.dialog-content{
    position: relative;
    width: 640px;
    min-height: 870px;
    margin: 200px auto;

.share-dialog{
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  .dialog-bd{
    margin: 128px 60px 76px;
    border-radius:  0 0 20px 20px;
    background: #fff;
    position: relative;
    .top-bg{
      position: absolute;
      width: calc(100% + 24px);
      height: 32px;
      top: -16px;
      left: -12px;
      background:#F97426;
      border-radius: 4px;
      z-index: 0;
    }
    .media-obj{
      position: relative;
      z-index: 1;
      background: #fff;
      padding: 50px 34px;
      border-bottom: 2px dashed currentColor;
      &:before,&:after{
        content: '';
        position: absolute;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background: currentColor;
        bottom: -16px;
        right: -16px;
      }
      &:before{
        left: -16px;
        right: auto;
      }
      .top-bg-1{
        position: absolute;
        width: 100%;
        height: 22px;
        top: 0;
        left: 0;
      }
    }
    .media-head-box{
      position: relative;
      height: 96px;
      width: 96px;
      .img-box{
        width: 98%;
        height: 98%;
      }
      .media-head-bg{
        position: absolute;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        top: -1px;
        left: -1px;
        background-size: 100% 100%;
      }
    }
    .qr-code{
      height: 300px;
      width: 300px;
      margin: 0 auto;
    }
  }
}
.share-img-box{
  position: relative;
  z-index: inherit;
  // top: 0;
  // left: 0;
  // width: 100%;
  // height: 100%;
}
}
}
</style>
